前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 实战:编写 JavaScript 库编写声明文件

本节我们正式开始声明文件的编写实战,因此我们得找一个没有 d.ts 声明的开源库,比较常用但是却用纯 js 编写的库我想到了 events,这个库就是 Node.js 中 events 模块的浏览器和 node 通用版,具体的 API 可见 EventEmitter。

# 搭建环节

我们先把库从 github 上克隆下来

git clone https://github.com/Gozala/events.git && events && npm i
@前端进阶之旅: 代码已经复制到剪贴板

# 如何入手

在根目录下新建一个文件 index.d.ts,我们的声明文件就在这里编写。

为 js 库编写 d.ts 需要我们从两方面入手,一个就是官方的 API 文档,另一个就是库的源码。

events库的API与 Node.js 10.1 的API是一样的,所以我们可以结合Node 10.x的 文档编码.

不管是从文档 api 的使用方式还是项目本身的源码都表明,我们主要在使用 events 库暴露出来的一个类 EventEmitter.

var EventEmitter = require('events')

var ee = new EventEmitter()
ee.on('message', function (text) {
  console.log(text)
})
ee.emit('message', 'hello world')
@前端进阶之旅: 代码已经复制到剪贴板

因此我们要先声明一个类并导出:

export class EventEmitter {

}
@前端进阶之旅: 代码已经复制到剪贴板

然后我们继续读官方文档,看看这个类暴露出了哪些方法或者属性:

# 静态属性/方法

events的文档

我们先从最简单的入手,通过文档我们发现这个类暴露出了一个 EventEmitter.defaultMaxListeners 静态属性,通常情况下我们的事件最多注册10个监听器,但是我们可以通过改变 EventEmitter.defaultMaxListeners 来修改这个默认值,很显然这是个 number 类型的静态属性。

export class EventEmitter {
  static defaultMaxListeners: number;

}
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏